:root,
page {
  --ui-primary: 19 93 236;
  --ui-primary-bold: 19 41 236;
  --ui-primary-muted: 51 119 255;

  --ui-warning: 255 128 25;
  --ui-warning-bold: 236 99 8;
  --ui-warning-muted: 255 148 42;

  --ui-danger: 237 77 63;
  --ui-danger-bold: 236 58 35;
  --ui-danger-muted: 255 104 91;

  --ui-success: 0 208 0;
  --ui-success-bold: 0 177 0;
  --ui-success-muted: 0 208 0;

  --ui-foreground: 255 255 255;
  --ui-foreground-bold: 255 255 255;
  --ui-foreground-muted: 235 235 235; // 白色-90%
  --ui-foreground-light: 191 191 191; // 白色-70%


  --ui-background: 33 33 34;
  --ui-background-bold: 29 29 30;
  --ui-background-muted: 41 41 44;

  --ui-border: 41 41 44;
  --ui-border-bold: 57 57 60;
  --ui-border-muted: 73 73 76;

  --ui-form: 41 41 41;
  --ui-form-muted: 62 62 62;
  --ui-form-bold: 33 33 34;


  --ui-text-placeholder: 150 150 150; // 白色-50%

  // size
  --ui-form-height: 108rpx;
  --ui-form-height-mini: 88rpx;

  // ui
  --ui-padding: 1rem;
  --ui-radius: 28rpx;
  --ui-border-animation: border 0.1s ease;
  --ui-font-base: 1rem;
  --ui-font-mini: 0.875rem;
  --ui-clear-icon-color: #c0c4cc;
  --ui-safe-area-bottom: env(safe-area-inset-bottom);
  --ui-safe-area-tabbar: calc(env(safe-area-inset-bottom) + 50px);
  --button-default: #383838;
}

$UISafeAreaBottom: calc(env(safe-area-inset-bottom) + 50px);

view {
  box-sizing: border-box;
  color: rgb(var(--ui-foreground));
}

/* #ifdef H5 */
div {
  box-sizing: border-box;
  color: rgb(var(--ui-foreground));
}

/* #endif */

view[name="mask"] {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(8px);
}

.pro-picker-container {
  .uni-picker-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ui-padding);
    height: 90rpx;
    background-color: rgb(var(--ui-form-bold));
    border-top-left-radius: var(--ui-radius);
    border-top-right-radius: var(--ui-radius);
    position: relative;
    gap: 1rem;

    &:after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      clear: both;
      border-bottom: 1px solid rgb(var(--ui-form-muted));
      color: #e5e5e5;
      transform-origin: 0 100%;
      transform: scaleY(0.5);
    }
  }

  uni-picker-view,
  picker-view {
    background-color: rgb(var(--ui-form-bold));

    .uni-picker-view-mask {
      background-image: linear-gradient(180deg,
          rgb(var(--ui-form-bold)),
          rgba(35, 35, 35, 0.7)),
        linear-gradient(0deg, rgb(var(--ui-form-bold)), rgba(35, 35, 35, 0.7));
    }

    .uni-picker-view-indicator {
      height: 80rpx
    }

    .picker-view-column-item {
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
    }

    .uni-picker-view-indicator:before,
    .uni-picker-view-indicator:after {
      border-color: rgb(var(--ui-form-muted));
    }
  }
}

// checkbox
/* #ifdef H5 */

uni-checkbox {
  .uni-checkbox-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;

    .uni-checkbox-input {
      margin-right: 0;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      outline: 0;
      border: 1px solid rgb(var(--ui-form-muted));
      background-color: rgb(var(--ui-form-bold));
      border-radius: 9999px;
      width: 22px;
      height: 22px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

/* #endif */

/* #ifdef MP-WEIXIN */
checkbox {
  border: 1px solid rgb(var(--ui-form-muted));
  background-color: rgb(var(--ui-form-bold));
  border-radius: 9999px;
}

/* #endif */

// dialog
.uni-popup-dialog {
  border-radius: var(--ui-radius) !important;
  background-color: rgb(var(--ui-form-bold)) !important;

  .uni-dialog-title {
    padding: var(--ui-padding) var(--ui-padding) 0 var(--ui-padding);
    text-align: center;

    .uni-dialog-title-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .uni-popup__info {
      color: rgb(var(--ui-foreground));
    }
  }

  .uni-dialog-content {
    padding: var(--ui-padding) !important;

    .uni-dialog-content-text {
      color: rgb(var(--ui-foreground));
      text-align: center;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      line-clamp: 3;
    }
  }

  .uni-dialog-button-group {
    border-top-color: rgb(var(--ui-form-muted)) !important;
    border: none !important;
    padding: 0 var(--ui-padding) var(--ui-padding);
    gap: var(--ui-padding);

    .uni-dialog-button {
      height: var(--ui-form-height-mini);
      border-radius: var(--ui-radius);
      background: linear-gradient(98deg, var(--button-default) 0%, var(--button-default) 100%);
      color: #d6d6d6 !important;

      &:active {
        background: linear-gradient(98deg, #454545 0%, #454545 100%);
      }

      .uni-dialog-button-text {
        color: rgb(var(--ui-foreground));
        font-size: var(--ui-font-mini) !important;
      }

      .uni-button-color {
        color: rgb(var(--ui-foreground));
      }
    }

    .uni-border-left {
      border-left-color: rgb(var(--ui-form-muted));
      border-radius: var(--ui-radius);
      background: linear-gradient(98deg, rgb(var(--ui-primary)) 0%, rgb(var(--ui-primary-bold)) 100%);
      color: #fff !important;

      &:active {
        background: linear-gradient(98deg, #0e51d6 0%, #0c20d7 100%);
      }
    }
  }
}

// picker
.uni-picker-container {

  .uni-mask,
  .uni-picker-mask {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
  }

  .uni-picker-custom,
  .uni-picker-content {
    background-color: rgb(var(--ui-form-bold)) !important;
    border-top-left-radius: var(--ui-radius);
    border-top-right-radius: var(--ui-radius);

    .uni-picker-view-indicator:before,
    .uni-picker-view-indicator:after {
      border-color: rgb(var(--ui-form-muted));
    }

    .uni-picker-item {
      color: rgb(var(--ui-foreground));
    }

    .uni-picker-header {
      &::after {
        border-color: rgb(var(--ui-form-muted));
      }

      .uni-picker-action {
        padding: 0 var(--ui-padding);
      }

      .uni-picker-action-confirm {
        color: $uni-primary;
      }
    }
  }

  .uni-picker-view-mask {
    background-image: linear-gradient(180deg,
        rgb(var(--ui-form-bold)),
        rgba(35, 35, 35, 0.6)),
      linear-gradient(0deg, rgb(var(--ui-form-bold)), rgba(35, 35, 35, 0.6));
  }
}

// button
button {
  border-radius: 36rpx !important;
  height: var(--ui-form-height);
  line-height: var(--ui-form-height) !important;
  box-sizing: border-box;
  font-size: var(--ui-font-base) !important;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

button[size='mini'] {
  height: 88rpx;
  line-height: 88rpx !important;
  font-size: var(--ui-font-mini) !important;
}

button[rounded-full=""] {
  border-radius: 9999px !important;
}

button.rounded-full {
  border-radius: 9999px !important;
}

textarea,
input {
  width: 100%;
  box-sizing: border-box;
}

button,
button[type=default] {
  color: rgb(var(--ui-foreground)) !important;
  background: linear-gradient(98deg, var(--button-default) 0%, var(--button-default) 100%);

  &:active {
    background: linear-gradient(98deg, #454545 0%, #454545 100%);
  }
}

button[disabled][type=default],
button[disabled]:not([type]) {
  color: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;

  &:active {
    background: linear-gradient(98deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%);
  }
}

button[loading]:not([disabled]),
button[loading][type=default] {
  &:active {
    background: linear-gradient(98deg, var(--button-default) 0%, var(--button-default) 100%);
  }
}

button[type=primary] {
  background: linear-gradient(98deg, rgb(var(--ui-primary)) 0%, rgb(var(--ui-primary-bold)) 100%);
  color: #fff !important;

  &:active {
    background: linear-gradient(98deg, #0e51d6 0%, #0c20d7 100%);
  }
}

button[disabled][type=primary] {
  background: linear-gradient(98deg, #4f82e9 0%, #3748e5 100%);
  color: rgba(255, 255, 255, 0.6) !important;

  &:active {
    background: linear-gradient(98deg, #4f82e9 0%, #3748e5 100%);
  }
}

button[loading][type=primary] {
  &:active {
    background: linear-gradient(98deg, rgb(var(--ui-primary)) 0%, rgb(var(--ui-primary-bold)) 100%);
  }
}

button[type=warn] {
  background: linear-gradient(98deg, #ed4d3f 0%, #ec3a23 100%);
  color: #fff !important;

  &:active {
    background: linear-gradient(98deg, #d5382a 0%, #de2d16 100%);
  }
}

button[disabled][type=warn] {
  background: linear-gradient(98deg, #f76255 0%, #ea432c 100%);
  color: rgba(255, 255, 255, 0.6) !important;

  &:active {
    background: linear-gradient(98deg, #f76255 0%, #ea432c 100%);
  }
}

button[loading][type=warn] {
  &:active {
    background: linear-gradient(98deg, #ed4d3f 0%, #ec3a23 100%);
  }
}

button[plain],
button[type=default][plain] {
  background: transparent !important;

  &:active {
    background: linear-gradient(98deg, rgba(#383838, 0.4) 0%, rgba(#383838, 0.4) 100%) !important;
  }
}

button[type=primary][plain] {
  background: transparent !important;
  border: 1px solid rgb(19, 93, 236) !important;

  &:active {
    background: linear-gradient(98deg, rgba(19, 93, 236, 0.4) 0%, rgba(19, 93, 236, 0.4) 100%) !important;
  }
}

button[type=warn][plain] {
  background: transparent !important;

  &:active {
    background: linear-gradient(98deg, #ed4e3f50 0%, #ec3a2350 100%) !important;
  }
}

// input

/* #ifdef MP-WEIXIN */
input {
  border: 2rpx solid transparent;
  transition: rgb(var(--ui-border-animation));
  border-radius: var(--ui-radius);
  background: rgb(var(--ui-form-bold));
  height: var(--ui-form-height);
  line-height: var(--ui-form-height);
  padding: 0 var(--ui-padding);
  color: rgb(var(--ui-foreground));

  &:focus,
  &:focus-within {
    border-color: rgb(var(--ui-primary));
  }
}

.input-placeholder {
  color: var(--ui-text-placeholder);
}

/* #endif */

/* #ifdef H5 */
input {
  height: var(--ui-form-height);
  line-height: var(--ui-form-height);

  .uni-input-wrapper,
  .uni-input-form {
    border: 2rpx solid transparent;
    transition: rgb(var(--ui-border-animation));
    border-radius: var(--ui-radius);
    background: rgb(var(--ui-form-bold));
    height: var(--ui-form-height);
    line-height: var(--ui-form-height);
    padding: 0 var(--ui-padding);
    color: rgb(var(--ui-foreground));

    &:focus-within {
      border-color: rgb(var(--ui-primary));
    }

    .uni-input-placeholder,
    .input-placeholder {
      padding: 0 1rem;
      color: var(--ui-text-placeholder);
    }
  }


}

/* #endif */

// textarea

/* #ifdef MP-WEIXIN */
textarea {
  border: 2rpx solid transparent;
  transition: rgb(var(--ui-border-animation));
  border-radius: var(--ui-radius);
  background: rgb(var(--ui-form-bold));
  color: rgb(var(--ui-foreground));
  padding: var(--ui-padding);
  line-height: 40rpx !important;

  &:focus-within,
  &:focus {
    border: 2rpx solid rgb(var(--ui-primary)) !important;
  }
}

/* #endif */

/* #ifdef H5 */
uni-textarea {
  width: 100% !important;
  line-height: 40rpx !important;

  .uni-textarea-wrapper {
    border: 2rpx solid transparent !important;
    transition: rgb(var(--ui-border-animation));
    border-radius: var(--ui-radius);
    background: rgb(var(--ui-form-bold));
    color: rgb(var(--ui-foreground));

    &:focus-within {
      border-color: rgb(var(--ui-primary)) !important;
    }

    .uni-textarea-line,
    .uni-textarea-compute {
      height: 100%;
    }

    .uni-textarea-placeholder,
    .input-placeholder {
      padding: var(--ui-padding);
      color: var(--ui-text-placeholder);
    }

    .uni-textarea-textarea {
      font-size: var(--ui-font-base) !important;
      padding: var(--ui-padding) !important;
      box-sizing: border-box;
      line-height: normal !important;
    }
  }
}

/* #endif */

// easy-input

/* #ifdef MP-WEIXIN */
.uni-easyinput {
  .uni-easyinput__placeholder-class {
    font-size: var(--ui-font-base);
    color: var(--ui-text-placeholder) !important;
  }

  .uni-easyinput__content {
    box-sizing: border-box;
    transition: rgb(var(--ui-border-animation));
    border-radius: var(--ui-radius);
    background: rgb(var(--ui-form-bold)) !important;
    color: rgb(var(--ui-foreground)) !important;
    border: 2rpx solid transparent !important;
    padding-right: var(--ui-padding) !important;



    .content-clear-icon {
      padding: 0 0 0 var(--ui-padding) !important;
      height: var(--ui-form-height);
      line-height: var(--ui-form-height);
      width: auto !important;

      &:has(.uniui-clear) {
        padding: 0 var(--ui-padding) !important;
      }

      .uni-icons,
      .uniui-clear {
        color: var(--ui-text-placeholder) !important;
        font-size: 40rpx !important;
      }
    }

    .uni-easyinput__content-input {
      font-size: var(--ui-font-base) !important;
      height: var(--ui-form-height) !important;
      line-height: var(--ui-form-height);
      background-color: transparent !important;
      border: 2rpx solid transparent;
      padding: 0 !important;
      padding-left: var(--ui-padding) !important;
      border: none !important;
    }

    .uni-easyinput__content-textarea {
      margin: 0;
      border: none !important;
      font-size: var(--ui-font-base) !important;
      line-height: normal !important;
      padding: var(--ui-padding);
    }
  }

  .is-focused {
    border: 2rpx solid rgb(var(--ui-primary)) !important;
  }
}

/* #endif */

/* #ifdef H5 */
.uni-easyinput {

  &:has(.is-focused) {
    .uni-easyinput__content {
      border: 2rpx solid rgb(var(--ui-primary)) !important;
    }
  }

  .uni-easyinput__content {
    background: rgb(var(--ui-form-bold)) !important;
    border: 2rpx solid transparent !important;
    transition: rgb(var(--ui-border-animation)) !important;
    border-radius: var(--ui-radius) !important;
    padding-right: var(--ui-padding) !important;

    .uni-easyinput__content-input {
      padding-left: 0 !important;
      height: var(--ui-form-height) !important;
      line-height: var(--ui-form-height) !important;
      font-size: var(--ui-font-base) !important;

      .uni-input-placeholder,
      .uni-easyinput__placeholder-class {
        color: var(--ui-text-placeholder);
        font-size: var(--ui-font-base);
      }

      .uni-input-wrapper {
        background-color: transparent;
        border: none;
        padding-right: 0;
      }
    }

    .uni-easyinput__content-textarea {
      padding-left: 0 !important;
      font-size: var(--ui-font-base) !important;
      margin: 0 !important;

      .uni-textarea-wrapper {
        background-color: transparent;
        border: none !important;

        .uni-textarea-line,
        .uni-textarea-compute {
          height: 100%;
        }

        .uni-textarea-placeholder,
        .uni-easyinput__placeholder-class {
          font-size: var(--ui-font-base);
          color: var(--ui-text-placeholder);
        }
      }
    }

    .uniui-clear,
    .content-clear-icon {
      color: var(--ui-text-placeholder) !important;
      padding: 0 0 0 var(--ui-padding) !important;
      font-size: 40rpx !important;
    }
  }
}

/* #endif */

// uni-select
/* #ifdef H5 */
.uni-stat__select {
  .uni-stat-box {
    .uni-select {
      background-color: rgb(var(--ui-form-bold));
      border: 2rpx solid transparent !important;
      transition: rgb(var(--ui-border-animation));
      border-radius: var(--ui-radius) !important;
      height: var(--ui-form-height) !important;
      line-height: var(--ui-form-height) !important;
      font-size: var(--ui-font-base) !important;
      padding-left: var(--ui-padding);
      padding-right: 0;

      .uni-select__input-box {
        height: var(--ui-form-height);

        .uniui-bottom,
        .uniui-top {
          font-size: 1.2rem !important;
          padding: 0 1.15rem;
        }

        .uniui-clear {
          font-size: 1.5rem !important;
          padding: 0 var(--ui-padding);
        }

        .uni-select__input-placeholder {
          color: var(--ui-text-placeholder) !important;
          font-size: var(--ui-font-base);
        }

        .uni-select__input-text {
          color: rgb(var(--ui-foreground));
        }

        .uni-icons {
          color: var(--ui-clear-icon-color) !important;
        }
      }

      .uni-select__selector {
        background-color: rgb(var(--ui-form-bold)) !important;
        border: 1px solid rgb(var(--ui-form-muted));
        border-radius: var(--ui-radius) !important;
        padding: 0.5rem;

        .uni-popper__arrow_bottom {
          border-bottom-color: rgb(var(--ui-form-muted));

          &::after {
            border-bottom-color: rgb(var(--ui-form-bold));
          }
        }

        .uni-popper__arrow_top {
          border-top-color: rgb(var(--ui-form-muted)) !important;

          &::after {
            border-top-color: rgb(var(--ui-form-bold)) !important;
          }
        }

        .uni-select__selector-scroll {
          max-height: 300rpx;
          box-sizing: border-box;

          .uni-select__selector-empty,
          .uni-select__selector-item {
            height: 88rpx;
            line-height: 88rpx;
            border-radius: 0.6rem;

            &:hover {
              background-color: rgb(var(--ui-form-muted));
            }
          }
        }
      }
    }

    &:has(.uni-select__selector) {
      .uni-select {
        border: solid 2rpx rgb(var(--ui-primary)) !important;
      }
    }
  }
}

/* #endif */

/* #ifdef MP-WEIXIN */
.uni-stat__select {
  .uni-stat-box {
    .uni-select {
      background-color: rgb(var(--ui-form-bold));
      border: 2rpx solid transparent !important;
      transition: rgb(var(--ui-border-animation));
      border-radius: var(--ui-radius) !important;
      height: var(--ui-form-height) !important;
      line-height: var(--ui-form-height) !important;
      font-size: var(--ui-font-base) !important;
      padding-left: var(--ui-padding);
      padding-right: 0;
      outline: none !important;
      -webkit-tap-highlight-color: transparent !important;

      .uni-select__input-box {
        height: var(--ui-form-height);

        .uniui-bottom,
        .uniui-top {
          font-size: 1.2rem !important;
          padding: 0 1.15rem;
        }

        .uniui-clear {
          font-size: 1.5rem !important;
          padding: 0 var(--ui-padding);
        }

        .uni-select__input-placeholder {
          color: var(--ui-text-placeholder) !important;
          font-size: var(--ui-font-base);
        }

        .uni-select__input-text {
          color: rgb(var(--ui-foreground));
        }

        .uni-icons {
          color: var(--ui-clear-icon-color) !important;
        }
      }

      .uni-select__selector {
        background-color: rgb(var(--ui-form-bold)) !important;
        border: 1px solid rgb(var(--ui-form-muted));
        border-radius: var(--ui-radius) !important;
        padding: 0.5rem;

        .uni-popper__arrow_bottom {
          border-bottom-color: rgb(var(--ui-form-muted));

          &::after {
            border-bottom-color: rgb(var(--ui-form-bold));
          }
        }

        .uni-popper__arrow_top {
          border-top-color: rgb(var(--ui-form-muted)) !important;

          &::after {
            border-top-color: rgb(var(--ui-form-bold)) !important;
          }
        }

        .uni-select__selector-scroll {
          max-height: 300rpx;
          box-sizing: border-box;

          .uni-select__selector-empty,
          .uni-select__selector-item {
            height: 88rpx;
            line-height: 88rpx;
            border-radius: 0.6rem;

            &:hover {
              background-color: rgb(var(--ui-form-muted));
            }
          }
        }
      }

      &:has(.uni-select__selector) {
        border: solid 2rpx rgb(var(--ui-primary)) !important;
      }
    }
  }
}

/* #endif */

// uni-forms
.uni-forms-item__error {
  display: block;
  font-size: var(--ui-font-base) !important;
  margin: 4rpx 0;
  // color: var(--ui-danger) !important;
}

// uni-countdown
.uni-countdown__number {
  color: rgb(var(--ui-primary)) !important;
}

page,
#app,
uni-app,
uni-page,
uni-page-wrapper {
  background-color: #0c0c0c;
}

@media (prefers-color-scheme: dark) {

  page,
  #app,
  uni-app,
  uni-page,
  uni-page-wrapper {
    background-color: #0c0c0c !important;
    color: rgb(var(--ui-foreground));
  }
}
